<template>
  <div :id="id" style="height:200px"></div>
</template>

<script>
  import {
    getSmallScreenDataApi
  } from "../../api/workStation/handle";
  export default {
    name: "DoubleLoop",
    data() {
      return {
        timer: null,
        tableData: [],
        option: {
          tooltip: {
            trigger: "item"
          },
          series: [{
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center"
            },
            emphasis: {
              label: {
                show: false,
                fontSize: "40",
                fontWeight: "bold"
              }
            },
            labelLine: {
              show: false
            },
            data: []
          }]
        }
      };
    },
    props: {
      id: {
        type: String,
        default: ""
      }
    },
    mounted() {
      this.init();
      this.timer = setInterval(() => {
        this.init();
      }, 10000);
    },
    methods: {
      init() {
        getSmallScreenDataApi().then(res => {
          let chartDom = document.getElementById(this.id);
          let myChart = this.$echarts.init(chartDom);
          this.tableData = [{
              value: res.data.filter(d => !d.isLost).length,
              name: "有料"
            },
            {
              value: res.data.filter(d => d.isLost).length,
              name: "无料"
            }
          ];
          this.option.series[0].data = this.tableData;
          myChart.setOption(this.option);
        });
      }
    },
    beforeDestroy() {
      window.clearInterval(this.timer);
      this.timer = null;
    },
  };
</script>

<style scoped>
</style>